<div id="container">
<div id="logo"><img src="../content/images/logo.png" width="310" height="31" /></div>
<div id="right"><p class="events"><a href="http://prairieasunder.com/events/month.php">Events</a></p></div>
<div class="clear"></div>
<div id="controls">
    <img class="song-control" data-bind="click: toggleSongRequestDialogVisible" src="@Url.Content("~/content/images/request.png")" title="Got a song request? Tyrone will play whatever tune's on your mind." />
    <img class="song-control" data-bind="click: playPause, attr: { src: playImage }" />
    <img class="song-control" data-bind="click: nextSong" src="@Url.Content("~/content/images/next.png")" />
</div>
</div>
<table id="songs-table">
    <thead>
        <tr>
            <th data-bind="visible: hasAnyRecentSongs">Recent</th>
            <th data-bind="visible: hasLikedAnySongs">My Likes</th>
            <th>Now Playing</th>
            <th data-bind="visible: trendingSongs().length > 0">Trending</th>            
            <th data-bind="visible: topSongs().length > 0">Top Rated</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="column" data-bind="template: { foreach: recentSongs, name: 'song-tile-template', afterAdd: fadeIn }, visible: hasAnyRecentSongs"></td>
            <td id="myLikedSongsColumn" class="column" data-bind="template: { foreach: myLikedSongs, name: 'song-tile-template', afterAdd: fadeIn }, visible: hasLikedAnySongs"></td>
            <td class="current-song-column">

                @*The big current song tile*@
                <div class="current-song" data-bind="with: currentSong">
                    <img class="album-art" data-bind="attr: { src: albumArtUri, title: artist + ' - ' + album + ' - ' + name }, click: playSongFromAlbum" />
                    <div class="info">
                        <div class="rating">
                            <img style="display: block; margin-left: 8px;" data-bind="attr: { src: thumbUpImage, title: likeHoverText }, click: like, touchstart: like" />
                            <span data-bind="text: communityRank, style: { color: chavah.converters.rankToColor($data.communityRank()) }"></span>
                            <img style="display: block; margin-left: 8px; margin-top: -7px;" data-bind="attr: { src: thumbDownImage, title: dislikeHoverText }, click: dislike, touchstart: dislike" />
                        </div>
                        <span class="name" data-bind="text: name, attr: { title: name }"></span>
                        <div class="artist">
                            <span>By</span>
                            <a class="artist" href="#" data-bind="text: artist, click: playSongFromArtist, attr: { title: artist + ' - click to play another song from this artist' }"></a>
                        </div>
                        <div class="artist">
                            <span class="artist">On</span>
                            <a class="album" href="#" data-bind="text: album, click: playSongFromAlbum, attr: { title: album + ' - click to play another song from this album' }"></a>
                        </div>
                    </div>
                    <div id="current-track-position" data-bind="style: { width: $root.currentTrackPositionPercentage }" />
                </div>

            </td>
            <td class="column" data-bind="template: { foreach: trendingSongs, name: 'song-tile-template', afterAdd: fadeIn }, visible: trendingSongs().length > 0"></td>
            <td class="column" data-bind="template: { foreach: topSongs, name: 'song-tile-template', afterAdd: fadeIn }, visible: topSongs().length > 0"></td>
        </tr>
    </tbody>
</table>

<div class="grayed-out" style="display: none" data-bind="visible: songRequestVisible">
    <div class="song-request-dialog">
        <img class="song-control" data-bind="click: closeSongRequestWindow" style="position: absolute; right: -20px; top: -20px;" src="@Url.Content("~/content/images/Close.png")" />
        <h1 style="line-height: 22px;" class="title">Request a song</h1>
        <span style="font-family: 'Lucida Sans'; font-size: 13px; margin-left: 5px; ">Want to request your favorite band?</span>
        <br />
        <span style="font-family: 'Lucida Sans'; font-size: 13px; margin-left: 5px; ">Type the name below, and we will play it for all our listeners.</span>
        <input id="song-request-textbox" type="text" data-bind="value: songRequestText, valueUpdate: 'keyup'" />
        <div id="song-request-drop-down" data-bind="visible: songRequestMatches().length >= 0, foreach: songRequestMatches"> 
            <div class="song-request-match ellipsis-overflow" data-bind="click: $root.songRequestMatchClicked">
                <img data-bind="attr: { src: albumArtUri, title: album }" />
                <div style="vertical-align:middle; display:inline-block; height: 48px;">
                    <span data-bind="text: artist + ' - ' + name"></span>
                </div>
            </div>
        </div>
        <div class="text-button" data-bind="click: requestSelectedSong, visible: songRequestMatches().length == 0">
            <a href="#">Request this song</a>
        </div>
    </div>
</div>

<div class="grayed-out" data-bind="visible: splashScreenVisible">
    <div id="splash-screen">
        <center><h1>Welcome to <a href="http://whatis.prairieasunder.com" target="_blank">Prairie Asunder Internet Radio</a></h1></center>
        <span><center>
            Use the ratings to customize what you hear!
	     <br />
	     <br />
            Prairie Asunder plays anything local to Central IL! Keep up with Prairie Asunder by adding our <a href="https://diasp.org/u/mightybowser" target="_blank">Diaspora*</a> or <a href="http://www.facebook.com/ILRadio" target="_blank">Facebook</a>, and check out our <a href="/events/month.php" target="_blank">local event calendar</a>.
            <br />
            <br />
            Got local music to share with the world? <a href="mailto:bailey@prairieasunder.com" target="_blank">Email us</a>, and we'll get your tunes on the station.
        </center></span>
        <div class="text-button" data-bind="click: closeSplashScreenAndStart">
            <a href="#">
                OK! Take me to the music
            </a>
        </div>
    </div>
</div>

<div id="player-container"></div>
<div id="player"></div>
<audio id="audioElement"></audio>

<script id="song-tile-template" type="text/html">
    <div class="song" data-bind="
            visible: hasSong, 
            event: { click: play, mouseenter: mouseEnter, mouseout: mouseLeave }, 
            fadeInOnSongChange: true,
            attr: { title: artist() + ' - ' + album() + ' - ' + name() + '\r\nCommunity rank: ' + ko.utils.unwrapObservable(communityRank()) }">
        <img data-bind="attr: { src: albumArtUri }" />
        <div class="info">
            <span data-bind="text: name"></span>
        </div>
    </div>
</script>

<script type="text/javascript">

    $(function () {

        // Required for IE if we're making cross-site calls.
        jQuery.support.cors = true;

        chavah.constants.contentDirectory = '@Url.Content("~/Content")';
        chavah.constants.scriptsDirectory = '@Url.Content("~/Scripts")';
        var userId = chavah.localstorage.getOrCreateUserId();
        var viewModel = new chavah.mainViewModel($(this));
        chavah.viewModel = viewModel;
        ko.applyBindings(viewModel);
        
        PubSub.subscribe("PlaySong", function (message, args) {
            if (viewModel.currentSong()) {
                viewModel.player.pause();
                viewModel.pushRecentSong(viewModel.currentSong());
            }

            $(".current-song").fadeOut(250, function () {
                viewModel.currentSong(args.song);
                $(".current-song").fadeIn(250);
            });
        });

        PubSub.subscribe("TogglePlayPause", function (message, args) {
            viewModel.player.playPause();
        });

        PubSub.subscribe("Pause", function (message, args) {
            if (viewModel.currentSong()) {
                viewModel.player.pause();
            }
        });

        chavah.dataServices.start();
    });

</script>